<template>
    <div class="heAndWi">
        <q-parallax :height="300" :speed="0.5">
            <template v-slot:media>
                <img :src="groupInfo.bgImg">
            </template>
            <div class="row-md q-pa-lg absolute-center rounded-borders">
                <q-avatar size="100px">
                    <img :src="groupInfo.img">
                </q-avatar>
                <div class="row-md ">
                    <span class="text-h6 text-cut text-justify text-white text-weight-medium text-cut">{{groupInfo.title}}  </span>
                </div>
                <div class="row-md ">
                    <span class="text-white text-caption q-pa-sm-sm">{{groupInfo.groupNum}}</span>
                </div>
            </div>
        </q-parallax>
        <q-btn-toggle
                v-model="groupTab"
                toggle-color="green"
                flat
                :options="[
                      {label: '详情', value: 'detail'},
                      {label: '成员', value: 'member'},
                      {label: '设置', value: 'setting'}
                    ]"
        />
        <q-separator/>
        <q-carousel
                v-model="groupTab"
                transition-prev="slide-right"
                transition-next="slide-left"
                animated
                control-color="primary"
                class="rounded-borders"
        >
            <q-carousel-slide name="detail" class=" no-wrap ">
                <div class="row margin-left margin-top">
                    <div class="text-subtitle2">
                        群介绍
                    </div>
                    <div class="text-grey margin-left text-center">
                        {{groupInfo.remark}}
                    </div>
                </div>
                <q-separator spaced/>
                <div class="row margin-left margin-top">
                    <div class="text-subtitle2">
                        群标签
                    </div>
                    <div class="text-grey margin-left q-pa-sm">
                        <q-badge class="margin-left margin-top" outline :color="item.color" :label="item.name"
                                 v-for="item in groupInfo.tags"
                                 :key="item.id"/>
                    </div>
                </div>
                <q-separator spaced/>
                <div class="row margin-left margin-top">
                    <div class="text-subtitle2">
                        成员
                    </div>
                    <div class="text-grey margin-left text-center">
                        ({{groupInfo.memberCount +'/' + groupInfo.maxMemberCount}})
                    </div>
                </div>
                <q-separator spaced/>
                <div class="row margin-left margin-top">
                    <div class="text-subtitle2">
                        管理员
                    </div>
                    <q-scroll-area horizontal class="profile-scroll-group-admin " :thumb-style="thumbStyle">
                        <div class="row no-wrap">
                            <q-intersection
                                    v-for="(item,index) in groupInfo.memberList"
                                    :key="item.id"
                                    transition="scale"
                                    class="example-item"
                            >
                                <q-avatar rounded size="60px" class="margin-left" @click="toAccountInfo(index)">
                                    <img :src="item.img"/>
                                    <q-badge v-if="item.isAdmin" floating :color="index === 0 ?'red':'green'">{{index === 0 ?'群主':'管理员'}}
                                    </q-badge>
                                    <q-tooltip
                                            transition-show="scale"
                                            transition-hide="scale"
                                            :offset="[10, 10]"
                                    >
                                        {{item.nickName?item.nickName:item.name}}
                                    </q-tooltip>
                                </q-avatar>
                            </q-intersection>
                        </div>
                    </q-scroll-area>
                </div>
            </q-carousel-slide>
            <q-carousel-slide name="member" class=" no-wrap ">
                <div class="row member-list bg-grey-3">
                    <div class="col-3 margin-left rounded-borders">
                        <q-btn flat no-caps @click="toAccountInfo()">
                            <q-avatar rounded size="42px">
                                <q-icon name="add_box" color="grey"/>
                            </q-avatar>
                            <span class="text-cut text-caption member-list-span-cut text-black">
                                添加</span>
                        </q-btn>
                    </div>
                    <div class="col-3 margin-left" v-for="(item,index) in groupInfo.memberList"
                         :key="item.id">
                        <q-btn flat no-caps @click="toAccountInfo(index)" v-if="hiddenGroupListFlag ||
                            (!hiddenGroupListFlag&&index<11)">
                            <q-avatar rounded size="42px">
                                <img :src="item.img">
                                <q-badge v-if="item.isAdmin" floating :color="index === 0 ?'red':'green'">{{index === 0 ?'群主':'管理员'}}
                                </q-badge>
                                <q-tooltip
                                        transition-show="scale"
                                        transition-hide="scale"
                                        :offset="[10, 10]"
                                >
                                    {{item.nickName?item.nickName:item.name}}
                                </q-tooltip>
                            </q-avatar>
                            <span class="text-cut text-caption member-list-span-cut text-black">
                                {{item.nickName?item.nickName:item.name}}</span>
                        </q-btn>
                    </div>
                </div>
                <div v-if="groupInfo.memberList.length>11" class="row-md text-center text-grey text-caption" @click="hiddenGroupListFlag
                =!hiddenGroupListFlag">
                    {{hiddenGroupListFlag?'收起群成员':'查看更多群成员'}}
                    <q-icon :name="hiddenGroupListFlag?'keyboard_arrow_up':'keyboard_arrow_down'"/>
                </div>

            </q-carousel-slide>
            <q-carousel-slide name="setting" class=" no-wrap ">
                <q-icon name="layers" color="primary" size="56px"/>
                <div class="q-mt-md text-center">
                    {{ groupTab }}
                </div>
            </q-carousel-slide>
        </q-carousel>

    </div>
</template>

<script>

  import AccountInfo from '../../account/info.vue'

  export default {
    name: "GroupInfo",
    props: {
      accountNum: {
        type: String,
        default: ''
      },
      groupInfo: Object
    },
    data () {
      return {
        hiddenGroupListFlag: false,
        slide: "first",
        groupTab: 'detail',
      }
    }
    ,
    methods: {
      // eslint-disable-next-line no-unused-vars
      toAccountInfo (val) {
        let memberListElement = this.groupInfo.memberList[val];
        this.$q.dialog({
          component: AccountInfo,
          // 如果要访问自定义组件中的
          // 路由管理器、Vuex存储等,
          // 则为可选：
          parent: this, // 成为该Vue节点的子元素
                        // （“this”指向您的Vue组件）
                        // （此属性在<1.1.0中称为“root”
                        //  仍然可以使用，但建议切换到
                        //  更合适的“parent”名称）

          // 传递给组件的属性
          // （上述“component”和“parent”属性除外）：
          userInfo: memberListElement,
          // ...更多属性...
        })
      }
    },
    computed: {
      thumbStyle () {
        return {
          right: '2px',
          borderRadius: '5px',
          backgroundColor: '#4caf50',
          width: '1px',
          opacity: 0.75
        }
      }
    }
  }
</script>

<style scoped>
    .profile-scroll-group-admin {
        height: 80px;
        width: 100%;
    }

    .member-list-span-cut {
        width: 42px
    }

    .member-list {
        width: 100%;
    }
</style>
